<template>
    <view class="canvas">
        <div class="canvas_name">
            <div>(mmol/L)</div>
            <div>{{row.name}}</div>
        </div>
        <div class="canvasbg">
            <!-- <div class="bgred" :style="style"></div> -->
            <canvas
                :canvas-id="canvasLine+index"
                :id="canvasLine+index"
                @touchstart="touchLineA"
                @touchmove="moveLineA"
                @touchend="touchEndLineA"
                class="charts"
            />
        </div>
    </view>
</template>
<script>
import uCharts from "../../components/u-charts/u-charts.js";
var lastMoveTime = null; //最后执行移动的时间戳
var newthas;

export default {
    data() {
        return {
            name: "",
            maxValue: 0,
            minValue: 0,
            nccanvaLineA: null,
            canvasLine: "canvasLine",
            historylist: null,
            itemsList: [],
            pixelRatio: 1,
            dataTime: [],
            currentData: [],
            cWidth: "",
            cHeight: "",
            style:''
        };
    },
    props: {
        index: "",
        row: Object,
    },
    mounted() {
        var _this = this;
        _this.name = _this.row.name;
        _this.maxValue = _this.row.maxValue;
        _this.minValue = _this.row.minValue;
        // _this.style='height:'+((_this.row.maxValue-_this.row.minValue).toFixed(2)*60)+'upx;top:'+((7-_this.row.maxValue).toFixed(2)*60+26)+'upx';
        newthas=this
        if (_this.row.hPressure) {
            for (var i = 0; i < _this.row.hPressure.length; i++) {
                var str=_this.row.hPressure[i].monitorTime.substring(0,5)
                var fas =  str.replace(/月/, "-")
                _this.dataTime.push(fas);
                // _this.dataTime.push(_this.row.hPressure[i].monitorTime);
                _this.currentData.push(_this.row.hPressure[i].values);
            }
             _this.dataTime= _this.dataTime.reverse()
             _this.currentData= _this.currentData.reverse()
        }else{
            _this.dataTime=[]
            _this.currentData=[]
        }
        _this.cWidth = uni.upx2px(750);
        _this.cHeight = uni.upx2px(500);
        _this.showLineA(_this.canvasLine + _this.index);
       
        // _this.showLineA(_this.canvasLine + _this.index);
    },
    methods: {
        touchLineA(e) {
            lastMoveTime = Date.now()
        },
        moveLineA(e) {
            var _this = this;
            let currMoveTime = Date.now();
            let duration = currMoveTime - lastMoveTime;
            if (duration < Math.floor(1000 / 60)) return; //每秒60帧
            _this.nccanvaLineA.showToolTip(e, {
                format: function (item, category) {
                    return category + " " + item.name + ":" + item.data;
                },
            });
        },
        touchEndLineA(e) {
            var _this = this;
            // _this.nccanvaLineA.touchLegend(e);
            _this.nccanvaLineA.showToolTip(e, {
                format: function (item, category) {
                    return category + " " + item.name + ":" + item.data;
                },
            });
        },
        showLineA(canvasId) {
            var _this = this;
            var frodata = [];

            // for (var i = _this.minValue * 10; i < _this.maxValue * 10; i++) {
            //     var itm = {
            //         value: i / 10,
            //         lineColor: "#ffe8f5",
            //     };
            //     frodata.push(itm);
            // }
         
                var itm = [{
                    // showLabel:true,
                    value: this.minValue,
                    lineColor: "#FFA5CA",
                },{
                    // showLabel:true,
                    value: this.maxValue,
                    lineColor: "#FFA5CA",
                },];
                frodata=itm;
           
            _this.nccanvaLineA = new uCharts({
                $this: newthas,
                canvasId: canvasId,
                type: "line",
                fontSize: 11,
                legend: { show: false },
                dataLabel: true,
                rotate: false, //横屏
                dataPointShape: true,
                dataPointShapeType: "solid",
                background: "#FFFFFF",
                pixelRatio: _this.pixelRatio,
                categories: _this.dataTime,
                series: [
                    {
                        color: "#333",
                        name: _this.name,
                        data: _this.currentData,
                        format: (val, index) => {
                            return val;
                        },
                    },
                ],
                // animation: true,
                // enableScroll: true, //开启图表拖拽功能
                xAxis: {
                    disableGrid: true,
                    type: "grid",
                    gridType: "solid",
                    gridColor: "#979797",
                    // itemCount: 3*4*60,
                    // labelCount:2,
                    format: (val) => {
                        return val;
                    },
                },
                yAxis: {
                    gridType: "dash",
                    gridColor: "#979797",
                    
                    splitNumber: 7,
                    dashLength: 8,
                    data: [
                        {
                            axisLineColor: "#979797",
                            gridType: "solid",
                            // gridColor: "#FF85B7",
                            min: 0,
                            max: 7,
                            format: (val) => {
                                return val.toFixed(1);
                            },
                        },
                    ],
                },
                width: _this.cWidth * _this.pixelRatio,
                height: _this.cHeight * _this.pixelRatio,
                enableMarkLine: true,
                extra: {
                    // line: {
                    //     width: "1px",
                    //     style: "straight",
                    // },
                    markLine: {
                        type: "solid",
                        data: frodata,
                    },
                    tooltip: {
                        showBox: true, //是否显示半透明黑色的提示区域
                        bgColor: "#ffffff", //主体背景颜色
                        bgOpacity: 1, //背景颜色透明度
                        gridType: "solid", //辅助线类型（虚线）
                        dashLength: 5, //虚线单段长度
                        gridColor: "#FFE0EC", //辅助线颜色
                        fontColor: "#333333", //主体文字颜色
                        labelBgColor: "#DFE8FF", //标签背景颜色
                        labelBgOpacity: 0.95, //背景颜色透明度
                        labelFontColor: "#666666", //标签文字颜色
                    },
                },
            });
        },
    },
};
</script>

<style scoped lang="scss">
.canvas {
    background: #fff;
    margin-bottom: 20upx;
    .canvas_name {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        padding: 0 20upx;
        div {
            -webkit-box-flex: 1;
            -ms-flex: 1;
            flex: 1;
        }
        div:nth-of-type(2) {
            text-align: right;
        }
    }
    .canvasbg{
            position: relative;
            .bgred{
                position: absolute;
                width: 100%;
                top: 130upx;
                height: 120upx;
                background: rgba(250,77,177, 0.17);
            }
        }
    .charts {
        width: 100%;
        height: 500upx;
    }
}
</style>